<template>
	<div class="zl_header_content">
		<div class="zl_header_content_item" v-if="topVideoShow">
			<video
				ref="zl_header_content_video_top"
				class="zl_header_content_video zl_header_content_video_top"
				muted
				autoplay
				playsinline
				preload="auto"
				:poster="videoUrls[0].poster"
				@ended="handleVideoEnded_top"
				@canplay="handleCanPlay"
			>
				<source :src="videoUrls[0].src" type="video/mp4" />
			</video>
		</div>
		<div class="zl_header_image">
			<img
				src="https://res.metaera.hk/resources/assets/images/zl/20250509-174640.png"
				alt=""
			/>
		</div>
		<div class="zl_header_content_wrap">
			<div class="zl_header_content_wrap_left">
				<div class="zl_header_content_wrap_zlxx animate-up">
					<img
						src="https://res.metaera.hk/resources/assets/images/zl/zl_header_zlxx.svg"
						alt=""
					/>
				</div>
				<div class="zl_header_content_wrap_tsgd animate-up">
					<img
						src="https://res.metaera.hk/resources/assets/images/zl/zl_header_tsgd.svg"
						alt=""
					/>
				</div>
				<div
					class="zl_header_content_wrap_cwzz animate-up pointer"
					@click="addCheck"
				>
				</div>
			</div>
			<div class="zl_header_content_wrap_right">
				<div class="zl_header_content_wrap_top animate-up">
					<img
						src="https://res.metaera.hk/resources/assets/images/zl/zl_header_bzdzksm.svg"
						alt=""
					/>
				</div>
				<div class="zl_header_content_wrap_dm">
					<div class="zl_header_content_wrap_dm_sub">
						<div
							class="zl_header_content_wrap_dm_item pointer"
							:class="{ zl_header_content_wrap_dm_item1: isDataLoaded }"
						>
							<div
								class="zl_header_content_wrap_dm_item_bg"
								v-if="isDataLoaded"
							>
								<div
									class="zl_header_content_wrap_dm_item_avatar"
									@click="openAuthorPage(hotColumns[0].author.id)"
								>
									<img :src="hotColumns[0].author.avatar_img" alt="" />
								</div>
								<div
									class="zl_header_content_wrap_dm_item_right"
									@click="openContentPage(hotColumns[0].id)"
								>
									<div class="zl_header_content_wrap_dm_item_title ellipsis_1">
										{{ hotColumns[0].title }}
									</div>
									<div
										class="zl_header_content_wrap_dm_item_illustrate ellipsis_2"
									>
										{{ hotColumns[0].illustrate }}
									</div>
								</div>
							</div>
						</div>
						<div
							class="zl_header_content_wrap_dm_item pointer"
							:class="{ zl_header_content_wrap_dm_item2: isDataLoaded }"
						>
							<div
								class="zl_header_content_wrap_dm_item_bg"
								v-if="isDataLoaded"
							>
								<div
									class="zl_header_content_wrap_dm_item_avatar"
									@click="openAuthorPage(hotColumns[1].author.id)"
								>
									<img :src="hotColumns[1].author.avatar_img" alt="" />
								</div>
								<div
									class="zl_header_content_wrap_dm_item_right"
									@click="openContentPage(hotColumns[1].id)"
								>
									<div class="zl_header_content_wrap_dm_item_title ellipsis_1">
										{{ hotColumns[1].title }}
									</div>
									<div
										class="zl_header_content_wrap_dm_item_illustrate ellipsis_2"
									>
										{{ hotColumns[1].illustrate }}
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="zl_header_content_wrap_dm_sub">
						<div
							class="zl_header_content_wrap_dm_item pointer"
							:class="{ zl_header_content_wrap_dm_item3: isDataLoaded }"
						>
							<div
								class="zl_header_content_wrap_dm_item_bg"
								v-if="isDataLoaded"
							>
								<div
									class="zl_header_content_wrap_dm_item_avatar"
									@click="openAuthorPage(hotColumns[2].author.id)"
								>
									<img :src="hotColumns[2].author.avatar_img" alt="" />
								</div>
								<div
									class="zl_header_content_wrap_dm_item_right"
									@click="openContentPage(hotColumns[2].id)"
								>
									<div class="zl_header_content_wrap_dm_item_title ellipsis_1">
										{{ hotColumns[2].title }}
									</div>
									<div
										class="zl_header_content_wrap_dm_item_illustrate ellipsis_2"
									>
										{{ hotColumns[2].illustrate }}
									</div>
								</div>
							</div>
						</div>
						<div
							class="zl_header_content_wrap_dm_item pointer"
							:class="{ zl_header_content_wrap_dm_item4: isDataLoaded }"
						>
							<div
								class="zl_header_content_wrap_dm_item_bg"
								v-if="isDataLoaded"
							>
								<div
									class="zl_header_content_wrap_dm_item_avatar"
									@click="openAuthorPage(hotColumns[3].author.id)"
								>
									<img :src="hotColumns[3].author.avatar_img" alt="" />
								</div>
								<div
									class="zl_header_content_wrap_dm_item_right"
									@click="openContentPage(hotColumns[3].id)"
								>
									<div class="zl_header_content_wrap_dm_item_title ellipsis_1">
										{{ hotColumns[3].title }}
									</div>
									<div
										class="zl_header_content_wrap_dm_item_illustrate ellipsis_2"
									>
										{{ hotColumns[3].illustrate }}
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="zl_header_content_wrap_dm_sub">
						<div
							class="zl_header_content_wrap_dm_item pointer"
							:class="{ zl_header_content_wrap_dm_item5: isDataLoaded }"
						>
							<div
								class="zl_header_content_wrap_dm_item_bg"
								v-if="isDataLoaded"
							>
								<div
									class="zl_header_content_wrap_dm_item_avatar"
									@click="openAuthorPage(hotColumns[4].author.id)"
								>
									<img :src="hotColumns[4].author.avatar_img" alt="" />
								</div>
								<div
									class="zl_header_content_wrap_dm_item_right"
									@click="openContentPage(hotColumns[4].id)"
								>
									<div class="zl_header_content_wrap_dm_item_title ellipsis_1">
										{{ hotColumns[4].title }}
									</div>
									<div
										class="zl_header_content_wrap_dm_item_illustrate ellipsis_2"
									>
										{{ hotColumns[4].illustrate }}
									</div>
								</div>
							</div>
						</div>
						<div
							class="zl_header_content_wrap_dm_item pointer"
							:class="{ zl_header_content_wrap_dm_item6: isDataLoaded }"
						>
							<div
								class="zl_header_content_wrap_dm_item_bg"
								v-if="isDataLoaded"
							>
								<div
									class="zl_header_content_wrap_dm_item_avatar"
									@click="openAuthorPage(hotColumns[5].author.id)"
								>
									<img :src="hotColumns[5].author.avatar_img" alt="" />
								</div>
								<div
									class="zl_header_content_wrap_dm_item_right"
									@click="openContentPage(hotColumns[5].id)"
								>
									<div class="zl_header_content_wrap_dm_item_title ellipsis_1">
										{{ hotColumns[5].title }}
									</div>
									<div
										class="zl_header_content_wrap_dm_item_illustrate ellipsis_2"
									>
										{{ hotColumns[5].illustrate }}
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { hotColumns } from "@/api/home";
import { getToken, getUserMobile } from "@/utils/auth";

export default {
	props: ["canPlay"],
	name: "",
	data() {
		return {
			videoUrls: [
				{
					src: "https://res.metaera.hk/resources/assets/images/zl/zl_header_video3.mp4",
					poster:
						"https://res.metaera.hk/resources/assets/images/zl/zl_header_video_1.jpg",
				},
			],
			topVideoShow: true, // 是否显示顶部视频
			isDataLoaded: false, // 控制动画触发
			hotColumns: [],
			token: getToken(),
		};
	},
	computed: {},
	methods: {
		openAuthorPage(id) {
			const route = this.$router.resolve({
				name: "/home_wz",
				params: { id: id },
			});
			window.open(route.href, "_blank");
		},

		openContentPage(id) {
			const route = this.$router.resolve({
				name: "/gw_detail",
				params: { id: id },
			});
			window.open(route.href, "_blank");
		},
		addCheck() {
			if (!this.token) {
				// 未登录
				// 未登录，跳转登录
				this.$PromptTip({ dialogVisible: true, showStatus: 1 });
			} else {
				// 已登录，跳转到专栏列表页
				this.$router.push({
					path: "/mywz",
				});
			}
		},
		handleVideoEnded_top() {
			this.$nextTick(() => {
				const video = this.$refs.zl_header_content_video_top;
				video.currentTime = 3; // 单位：秒
				video.play().catch((e) => console.log("Autoplay prevented:", e));
			});

			const video = this.$refs.zl_header_content_video_top;
			if (video) {
				video.currentTime = 3;
				video.play().catch(() => {});
			}
		},
		initVideo() {
			const video = this.$refs.zl_header_content_video_top;
			if (video) {
				// 确保静音
				video.muted = true;

				// 尝试播放
				const playPromise = video.play();

				if (playPromise !== undefined) {
					playPromise.catch((error) => {
						console.log("Autoplay prevented:", error);
						// 可选：添加一个“播放”按钮提示用户点击
					});
				}
			}
		},
		handleCanPlay() {
			this.$refs.zl_header_content_video_top.play().catch((error) => {
				console.log("Autoplay failed:", error);
			});
		},
		getHotColumns() {
			hotColumns()
				.then((res) => {
					if (res.code == 200) {
						this.hotColumns = res.data;
						this.isDataLoaded = true;
					}
				})
				.catch((error) => {
					// this.$message.error(error.message);
				});
		},
	},
	watch: {
		// 监听 parentData 变化
		canPlay(newVal) {
			if (newVal) {
				this.getHotColumns(); // 父数据变化后请求子数据
			}
		},
	},
	mounted() {
		this.$refs.zl_header_content_video_top.play().catch((error) => {
			console.log("Autoplay failed:", error);
		});
		this.token = getToken();
		this.initVideo();
	},
	created() {
		this.getHotColumns(); // 父数据变化后请求子数据
	},
};
</script>

<style scoped>
.zl_header_content {
	position: relative; /* 父容器设为相对定位 */
	width: 100%;
	aspect-ratio: 1440/611;
}
.zl_header_content_item,
.zl_header_content_wrap {
	width: 100%;
	height: 100%;
	position: absolute; /* 子元素绝对定位 */
	top: 0;
	left: 0;
	display: flex;
}
.zl_header_content video {
	height: 100%;
	width: 100%;
}
</style>
<style>
.zl_header_content_video::-webkit-media-controls {
	display: none !important;
}
.zl_header_content_video::-webkit-media-controls-enclosure {
	display: none !important;
}
.zl_header_content_video {
	/* 确保全平台隐藏 */
	-ms-overflow-style: none; /* IE和Edge */
	scrollbar-width: none; /* Firefox */
}
.zl_header_content_video::-webkit-scrollbar {
	display: none; /* Chrome/Safari/Webkit */
}

.zl_header_content_wrap_left {
	margin-left: 5%;
	/* margin-top: 5%; */
	margin-bottom: 10%;
	width: 30%;
	height: 85%;
	justify-content: space-between;
	flex-shrink: 0; /* 禁止压缩 */
}

.zl_header_content_wrap_zlxx {
	align-content: center;
	width: 100%;
	margin-top: 15%;
}
.animate-up {
	animation: slideUp 2s ease-out forwards;
}

@keyframes slideUp {
	0% {
		transform: translateY(100%);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}
.zl_header_content_wrap_tsgd {
	align-content: center;
	width: 90%;
	margin-top: 15%;
}

.zl_header_content_wrap_cwzz {
	align-content: center;
	width: 60%;
	aspect-ratio: 292/58;
	margin-left: 10%;
	margin-top: 25%;
	background-image: url("https://res.metaera.hk/resources/assets/images/zl/组件 351.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
.zl_header_content_wrap_cwzz:hover {
	background-image: url("https://res.metaera.hk/resources/assets/images/zl/20250513-112637.png");
}
.zl_header_content_wrap_left img {
	text-align: center;
	align-content: center;
	width: 100%;
	height: auto;
}

.zl_header_content_wrap_right {
	width: 65%;
}

.zl_header_content_wrap_top {
	text-align: center;
	margin-top: 4%;
	height: 10%;
}

.zl_header_content_wrap_top img {
	width: auto;
	height: 100%;
}
</style>

<style scoped>
.zl_header_content_wrap_dm_item {
	background-image: url("https://res.metaera.hk/resources/assets/images/zl/zl_header_dm_bg.svg");
	background-repeat: no-repeat; /* 防止平铺 */
	background-position: center; /* 图片居中 */
	background-size: cover;
	/* 可选附加属性 */
	display: inline-block; /* 根据布局需要选择 */
	border: 1px solid transparent; /* 预留边框空间（可选） */
	position: absolute;
	align-content: center;
}

.zl_header_content_wrap_dm_sub {
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.zl_header_content_wrap_dm_item1 {
	width: 30%;

	aspect-ratio: 320/118;
	top: 15%;

	right: -25%;
	animation: slideLeft1 1.5s forwards;
	animation-delay: 0s;
}

.zl_header_content_wrap_dm_item3 {
	width: 30%;
	aspect-ratio: 320/118;

	top: 40%;
	right: -25%;
	animation: slideLeft3 1.6s forwards;
	animation-delay: 0s;
}

.zl_header_content_wrap_dm_item5 {
	width: 30%;

	aspect-ratio: 320/118;
	top: 65%;

	right: -25%;
	animation: slideLeft1 1.7s forwards;
	animation-delay: 0s;
}

.zl_header_content_wrap_dm_item2 {
	width: 30%;

	aspect-ratio: 320/118;
	top: 15%;

	right: -25%;
	animation: slideLeft2 1.5s forwards;
	animation-delay: 0s;
}

.zl_header_content_wrap_dm_item4 {
	width: 30%;
	aspect-ratio: 320/118;

	top: 40%;
	right: -25%;
	animation: slideLeft4 1.6s forwards;
	animation-delay: 0s;
}

.zl_header_content_wrap_dm_item6 {
	width: 30%;

	aspect-ratio: 320/118;
	top: 65%;

	right: -25%;
	animation: slideLeft2 1.7s forwards;
	animation-delay: 0s;
}
/* 关键帧动画：从右到左 */
@keyframes slideLeft1 {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(calc(-60vw)); /* 移动到左侧指定位置 */
	}
}
@keyframes slideLeft3 {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(calc(-65vw)); /* 移动到左侧指定位置 */
	}
}

/* 关键帧动画：从右到左 */
@keyframes slideLeft2 {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(calc(-30vw)); /* 移动到左侧指定位置 */
	}
}
@keyframes slideLeft4 {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(calc(-35vw)); /* 移动到左侧指定位置 */
	}
}
.zl_header_content_wrap_dm_item_bg {
	display: flex;
	margin-left: 36%;
	height: 100%;
	align-items: center;
}
.zl_header_content_wrap_dm_item_right {
	display: block;
	margin-left: 7%;
	margin-right: 5%;
	justify-content: space-between;
	height: 100%;
}
.zl_header_content_wrap_dm_item_avatar {
	width: 30%;
	flex-shrink: 0;
}
.zl_header_content_wrap_dm_item_avatar img {
	width: 100%;
	aspect-ratio: 1/1;
	border-radius: 50%;
	object-fit: cover;
}

.zl_header_content_wrap_dm_item_title {
	margin-top: 30%;
	font-size: clamp(10px, calc(100vw * 15 / 1240), 25px);
	font-weight: 500;
	letter-spacing: normal;
	color: #ffffff;
	height: 1.2em;
	line-height: 1.2em;
}

.zl_header_content_wrap_dm_item_illustrate {
	margin-top: clamp(2px, calc(100vw * 4 / 1240), 10px);
	padding-top: clamp(6px, calc(100vw * 9 / 1240), 20px);
	font-size: clamp(6px, calc(100vw * 10 / 1240), 15px);
	font-weight: normal;
	letter-spacing: normal;
	color: #ffffff;
	height: 2.5em;
	line-height: 1.2em;
}

.zl_header_image {
	display: none;
}

@media screen and (max-width: 900px) {
	.zl_header_content_item {
		display: none;
	}

	.zl_header_image {
		display: flex;
	}

	.zl_header_image img {
		width: 100%;
		height: auto;
	}
}
</style>
